<template>
    <a-layout id="main">
        <a-layout-sider width="200" style="background: #fff">
            <a-menu
                    mode="inline"
                    :style="{ height: '100%', borderRight: 0 }"
                    @click="menuClick"
                    v-model="active"
            >

                <template v-for="menu in menus">
                    <a-sub-menu v-if="menu.children && menu.children.length>1" :key="menu.id">
                        <span slot="title">
                           <i class="designer-icon" v-html="menu.meta.icon||'&#xe615;'"/>
                            {{menu.meta.title}}
                        </span>
                        <a-menu-item v-for="men in menu.children||[]" :key="men.id">
                            <i class="designer-icon" v-html="men.meta.icon||'&#xe615;'"/>
                            {{men.meta.title}}
                        </a-menu-item>
                    </a-sub-menu>
                    <template v-else-if="menu.children && menu.children.length===1">
                        <a-menu-item :key="menu.children[0].id">
                            <i class="designer-icon" v-html="menu.meta.icon||'&#xe615;'"/>
                            {{menu.children.length}}
                            {{menu.children[0].meta.title}}
                        </a-menu-item>
                    </template>
                </template>
            </a-menu>
        </a-layout-sider>
        <a-layout style="padding: 0 10px;">
            <a-layout-content
                    class="main-content"
            >
                <router-view/>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>

<script>

export default {
  name: 'homeLayoutContent',
  data() {
    return {
      menus: [],
      active: [0]
    }
  },
  watch: {
    active(v) {
      this.$store.dispatch('setLeftActive', v)
    },
    '$store.getters.leftActive'(v) {
      this.active = v
    },
    '$store.getters.active'(v) {
      this.loadData()
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      const menus = this.$store.getters.routers
      const active = this.$store.getters.active
      this.active = this.$store.getters.leftActive
      this.menus = menus.filter(v => {
        return v.id === active[0]
      })[0].children
      console.log('this.menus', this.menus)
    },
    menuClick({ key }) {
      console.log(key)
      let menu
      const getMenu = array => {
        array.forEach(v => {
          if (v.id === key) {
            menu = v
          }
          if (v.children) {
            getMenu(v.children)
          }
        })
      }
      getMenu(this.menus)
      console.log(menu)
      if (this.active[0] !== key) {
        if (menu.redirect) {
          // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
          this.$router.push(menu.redirect)
        } else {
          // 跳转到目的路由
          this.$router.push(menu.path)
        }
      }
    }
  }
}
</script>

<style scoped>
    .main-content {
        /*padding: 24px;*/
        margin: 0;
        minHeight: calc(100% - 100px);
    }

    #main {
        height: 100%;
    }
</style>
